import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { AtButton, AtActionSheet, AtActionSheetItem, AtInput } from 'taro-ui'
import { DNavBar, DAtInpute } from '@/components'
import http from '@/api'
import './index.scss'
import { validPhone } from '@/utils/validate'

export default class ApplyJoin extends Component {
    state = {
        isOpened: false,
        label: '发送验证码',
        time: 60,
        isGoing: false, // 是否开启定时器
        formData: {
            entId: '',
            mobile: '',
            name: '',
            code: '',
            post: '销售顾问'
        },
        postList: [
            {
                name: '销售顾问'
            },
            {
                name: '销售经理'
            },
            {
                name: '大客户经理'
            },
            {
                name: '市场经理'
            },
            {
                name: '总经理'
            },
            {
                name: '老板'
            }
        ]
    }

    componentDidMount() {
        const { entId } = this.$router.params
        const { formData } = this.state

        formData.entId = entId

        this.setState({
            formData
        })
    }

    handleChange(type, newValue) {
        const { formData } = this.state

        formData[type] = newValue

        this.setState({
            formData
        })
    }

    handlePost(item) {
        const { formData } = this.state
        formData.post = item.name
        this.setState({
            formData,
            isOpened: false
        })
    }

    changeCode(newVal) {
        let { formData } = this.state
        formData.code = newVal
        this.setState({
            formData
        })
    }

    showToast(title) {
        Taro.showToast({
            title,
            icon: 'none'
        })
    }

    // 发送验证码
    getNumberCode() {
        let { time, isGoing,  formData } = this.state
        if (!formData.mobile) {
            this.showToast('手机号不能为空')
            return
        }
        if (!validPhone(formData.mobile)) {
            this.showToast('手机号格式错误')
            return
        }
        if (isGoing) {
            return
        } else {
            time--
            this.setState({
                isGoing: true,
                label: `${time}秒后可重发`
            })

            // 发送验证码
            http.getUserCode({
                mobile: formData.mobile,
                type: '3'
            }).then(res => {
                Taro.showToast({
                    title: '验证码发送成功',
                    icon: 'none'
                })
            })

            this.getNumberCode.timeId = setInterval(() => {
                time--
                if (time === 0) { // 倒计时结束
                    // 清除定时器
                    clearInterval(this.getNumberCode.timeId)
                    // 文本重置
                    this.setState({
                        time: 60,
                        label: '重新获取',
                        isGoing: false
                    })
                    return
                }
                this.setState({
                    label: `${time}秒后可重发`
                })
            }, 1000)
        }
    }

    async submit() {
        const { formData } = this.state
        const { name, mobile, code } = formData
        if (!name) {
            this.showToast('姓名不能为空')
            return
        }

        if (!mobile) {
            this.showToast('手机号不能为空')
            return
        }
        if (!validPhone(mobile)) {
            this.showToast('手机号格式错误')
            return
        }
        if (!code) {
            this.showToast('验证码不能为空')
            return
        }

        await http.approveEntByUrl(formData)

        Taro.redirectTo({
            url: '/pages/myinfo/auditInfo?title=申请加入企业'
        })
    }

    render() {
        const { formData, postList, isOpened, label } = this.state

        return (
            <View className="apply_join">
                <DNavBar title="申请加入企业"></DNavBar>

                <View className="container">
                    <DAtInpute title="员工姓名" value={formData.name} placeholder="请输入员工姓名" onChange={this.handleChange.bind(this, 'name')}></DAtInpute>
                    <DAtInpute title="员工手机号" type="number" value={formData.mobile} placeholder="请输入员工手机号" onChange={this.handleChange.bind(this, 'mobile')}></DAtInpute>
                    <View className="verift">
                        <AtInput placeholder="请输入验证码" type="number" value={formData.code} onChange={this.changeCode.bind(this)}>
                            <View onClick={this.getNumberCode.bind(this)}>{label}</View>
                        </AtInput>
                    </View>
                    <DAtInpute title="员工职务" icon='chevron-right' value={formData.post} onRightHanlde={() => { this.setState({ isOpened: true })}}></DAtInpute>

                    <AtButton onClick={this.submit.bind(this)}>提交</AtButton>
                </View>

                {/* 弹层 */}
                <AtActionSheet isOpened={isOpened} cancelText='取消' title='员工职务' onClose={() => {this.setState({ isOpened: false })}}>
                    {
                        postList && postList.map(item =>
                            <AtActionSheetItem className={formData.post == item.name ? 'active' : ''} onClick={this.handlePost.bind(this, item)}>{item.name}</AtActionSheetItem>
                        )
                    }

                </AtActionSheet>
            </View>
        )
    }
}
